<template>
	<view>
		<view class="merchantList">
			<view class="merchantList_head">
				<view class="head_search">
					<image class="search_icon" src="/static/pages/image/search_icon1.png" mode=""></image>
					<view class="search_line" />
					<input type="text" @blur="onSearch" @confirm="onSearch" v-model="shop_name" value="" class="search_input" placeholder="输入订单关键词" />
				</view>
			</view>
		
			<view class="merchantList_filter">
				<view class="filter_item">
					<text>综合排序</text>
					<image class="icon" src="/static/pages/image/down.png" mode=""></image>
				</view>
		
				<view class="filter_item" v-for="(item,index) in list" :key="index">
					<text>{{item.name}}</text>
				</view>
		
			</view>
			
			<view class="merchantList_list">
				<view class="merchantList_item" v-for="item in shoplist" :key="item.id">
					<view class="item_left">
						<image class="image" :src="item.shop_image" mode=""></image>
						<view class="content">
							<text class="title">{{item.shop_name}}</text>
							<view class="sunui_star">
								<view class="sunui_star_content">
									<SunuiStar :starSize='"0.5em"' :defaultStar="3" :disabledStar="true" />
								</view>
								<text class="sunui_star_txt">4.5</text>
							</view>
							<text class="sales">月销{{item.sold_count}}</text>
						</view>
					</view>
					<button class="item_right" type="default">进店</button>
				</view>
			</view>
		</view>
		<view-tabbar :current="4"></view-tabbar>
	</view>
</template>

<script>
	var app = getApp();
	import SunuiStar from '@/components/sunui-star/sunui-star.vue'
	import Tabbar from '@/pagesA/tabber/tabber.vue'
	export default {
		components:{
			SunuiStar,
			'view-tabbar': Tabbar
		},
		data() {
			return {
				list: [{
						name: '销量高'
					},
					{
						name: '发货快'
					},
					{
						name: '评分高'
					},
					{
						name: '价格优'
					}
				],
				shoplist:[],
				leftid:1,
				shop_name:''
			}
		},
		onLoad() {
			this.getShoplist()
		},
		methods: {
			onSearch(){
				this.leftid = 1
				this.shoplist = []
				this.getShoplist()
			},
			getShoplist() {
				app.globalData.util.request({
				  url: "entry/wxapp/Api",
				  data: {
				    m: "monai_market",
				    r: "shop.index.shoplist",
					shop_name:this.shop_name,
					leftid:this.leftid
				  },
				  success: e => {
					this.shoplist = this.shoplist.concat(e.data.data)
				  }
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}

	.merchantList {
		background: #F7F6FB;
		height: 100%;

		.merchantList_head {
			margin-top: 40upx;
			background-color: #FFFFFF;
			padding: 0 30upx 26upx 30upx;
			box-sizing: border-box;

			.head_search {
				height: 60upx;
				display: flex;
				align-items: center;
				background: #F7F7F7;
				border-radius: 30upx;
				padding: 0 24upx;
				box-sizing: border-box;

				.search_icon {
					width: 28upx;
					height: 29upx;
				}

				.search_line {
					width: 3upx;
					height: 37upx;
					background-color: #AEAEAE;
					margin: 0 14upx;
				}
			}

		}

		.merchantList_filter {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			margin: 34upx 0 26upx 0;

			.filter_item {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
				color: #616065;

				.icon {
					width: 12upx;
					height: 8upx;
					margin-left: 10upx;
				}
			}
		}
		
		.merchantList_list{
			padding: 0 28upx 0 24upx;
			box-sizing: border-box;
			.merchantList_item + .merchantList_item{
				margin-top: 16upx;
			}
			
			.merchantList_item{
				padding:  26upx 30upx 37upx 25upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				border-radius: 30upx;
				
				.item_left{
					display: flex;
					flex: 1;
					.image{
						width: 141upx;
						height: 141upx;
						border-radius: 10upx;
						margin-right: 20upx;
					}
					
					.content{
						flex: 1;
						display: flex;
						flex-direction: column;
					}
					
					.sunui_star_content{
						width: 160upx;
					}
					
					.title{
						font-size: 32upx;
						font-weight: 800;
						color: #242424;
					}
					
					.sales{
						font-size: 22upx;
						font-weight: 500;
						color: #535353;
					}
					
					.sunui_star{
						display: flex;
						align-items: center;
						width: 100%;
						margin: 16upx 0 14upx 0;
					}
					
					.sunui_star_txt{
						font-size: 22upx;
						font-weight: 500;
						color: #535353;
						line-height: 22upx;
						margin-top: 5rpx;
					}
				}
				
				
				.item_right{
					margin: 0;
					width: 143upx;
					height: 64upx;
					background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
					border-radius: 32upx;
					font-size: 30upx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 64upx;
				}
			}
			
			
		}
	}
</style>
